/* 
所有路由配置的数组
*/
// import About from '../pages/About.vue'
// import Home from '../pages/Home.vue'

// 动态引入
const About = () => import('@/pages/About.vue')
const Home = () => import('../pages/Home.vue')

import News from '../pages/News.vue'
import Message from '../pages/Message.vue'
import MessageDetail from '../pages/MessageDetail.vue'

export default  [
  {
    name: 'about',
    path: '/about',
    component: About
  },
  {
    path: '/home',  // ctrl +shift + L
    component: Home,
    children: [
      {
        // path: '/news' // 不对   path左侧的/代表项目根路径
        path: '/home/news',
        component: News
      },
      {
        path: 'message',  // 左侧不加/: 代表父路由路径下的子路径
        component: Message,
        children: [
          {
            name: 'MessageDetail', // 组件的标识名称
            path: '/home/message/detail/:id', // 通过params参数传递数据
            component: MessageDetail,
            // 方式一: 布尔值 ==> 直接将所有params参数数据映射与props传入 ==> 只能是params数据
            // props: true,
            // 方式二: 对象 ==> 将对象中的所有属性映射成props传入  ==> 只能是自定义的数据
            // props: {id: 12, name: 'tom'}
            // 方式三: 函数  ==> 将函数返回对象中的所有属性映射成props传入 ==> 可以传递params/query/自定义的数据
            props: route => ({id: route.params.id, title: route.query.title, name: '自定义值'})
          }
        ]
      },
    ]
  },
  

  // 自动重定向的路由
  {
    path: '/',
    redirect: '/about'
  }
]
